import { Flex, Button, WingBlank, WhiteSpace } from 'antd-mobile';
import React, { Component } from 'react'
export default class Group extends Component {
    render() {
        return (
          <div className="button-container">
            <WhiteSpace />
            <WingBlank>
              <Flex>
                <Flex.Item>
                  <Button>2列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">2列</Button>
                </Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item>
                  <Button>2列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">2列</Button>
                </Flex.Item>
              </Flex>
            </WingBlank>
            <WhiteSpace />
            <WingBlank>
              <Flex>
                <Flex.Item>
                  <Button size="small">3列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary" size="small">3列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button size="small">3列</Button>
                </Flex.Item>
              </Flex>
            </WingBlank>
            <WhiteSpace />
            <WingBlank>
              <Flex>
                <Flex.Item>
                  <Button>4列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">4列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button>4列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">4列</Button>
                </Flex.Item>
              </Flex>
            </WingBlank>
            <WhiteSpace />
            <WingBlank>
              <Flex>
                <Flex.Item>
                  <Button size="small">5列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">5列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button size="small">5列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">5列</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary">5列</Button>
                </Flex.Item>
              </Flex>
            </WingBlank>
            <WhiteSpace />
          </div>
        );
      }    
}
